<!DOCTYPE html>
<html>
<head>
    <title>图片上传</title>
    {% include 'admin/common/header.html' %}
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs9">
        <div style="height:325px;background-color: rgb(247, 247, 247);">
            <img id="sourceImage" src="">
        </div>
    </div>
    <div class="layui-col-xs3" style="padding-left:0px;">
        <div id="previewImage"
             style="width:210px;height:200px;overflow:hidden;">
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
            <label for="uploadPicture" style="margin-right: 5px;" class="pear-btn pear-btn-sm pear-btn-success layui-icon layui-icon-upload"
                   title="选择图片">选择图片</label>
            <input class="layui-upload-file" id="uploadPicture" accept="image/jpeg,image/jpg" type="file" value="选择图片">

            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" style="margin-right: 5px;" cropper-event="rotate"
                    data-option="-15" title="左旋15°">左旋</button>
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" style="margin-right: 5px;" cropper-event="rotate"
                    data-option="15" title="右旋15°">右旋</button>
            <button class="pear-btn pear-btn-sm pear-btn-warming layui-icon layui-icon-refresh"  cropper-event="reset"
                    title="重置">重置</button>

        </div>
        <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为{{ imgscale }},大小在5m以内。</div>
    </div>
</div>
</body>
{% include 'admin/common/footer.html' %}
<script>
  layui.use(['jquery', 'layer', 'cropper', 'popup'], function () {
    let useold={{ useold }};
    let $ = layui.jquery;
    let layer = layui.layer;
    let cropper = layui.cropper;
    let popup = layui.popup;
    let coverimg={{ coverimg }};
    let getwidth={{ width }};
    let options = {
      aspectRatio: {{ imgscale }}, // 裁剪框比例
      preview: '#previewImage', // 预览div
      viewmode: 2
    }
    if(useold===1) {$('#sourceImage').attr('src', parent.coverimg)}
      //console.log(parent.coverimg,9999)
    $('#sourceImage').cropper(options)
    window.submitForm = function () {
        let simg=document.getElementById("sourceImage")
        console.log(simg.width,simg.height)
    $('#sourceImage').crossOrigin = 'anonymous'//解决跨域图片问题
    let tempcanvas=$('#sourceImage').cropper('getCroppedCanvas', {width:simg.width>getwidth?getwidth:simg
        .width, height: 100});
      if(!tempcanvas){popup.failure('请先选择图片！');return false; }
      tempcanvas.toBlob(function (blob) {
        let timeStamp = Date.parse(new Date())
        let fileName = timeStamp + '.jpg'
        let formData = new FormData()
        formData.append('file', blob, fileName)
        formData.append('fileName', fileName)
        formData.append('fileToken', timeStamp)
        $.ajax({
          method: 'post',
          url: '/admin/file/upload', //用于文件上传的服务器端请求地址
          data: formData,
          processData: false,
          contentType: false,
          success: function (result) {
            if (result.success) {
               console.log(result.data.src);
                if(coverimg===0){parent.setcoverandlunbo(0,result.data.src)}
                else{parent.setcoverandlunbo(1,result.data.src)}
                parent.layer.close(parent.layer.getFrameIndex(window.name))
            } else {
              popup.failure('上传失败')
            }
         }
        })
      },"image/jpeg",0.95)
    }

    $('.pear-btn').on('click', function () {
      let event = $(this).attr('cropper-event')
      if (event === 'rotate') {
        let option = $(this).attr('data-option')
        $('#sourceImage').cropper('rotate', option)
      } else if (event === 'reset') {
        $('#sourceImage').cropper('reset')
      }
      $('#uploadPicture').change(function () {
        let r = new FileReader()
        let f = this.files[0]
        let uploadFileSize = f.size / 1024
        if (uploadFileSize > 5120) {
          parent.layer.msg('上传文件不得超过5m', { icon: 5 })
          return false
        }
        r.readAsDataURL(f)
        r.onload = function (e) {
          $('#sourceImage')
            .cropper('destroy')
            .attr('src', this.result)
            .cropper(options)
        }
      })
    })
  })
</script>